<template>
  <div class="publish-view">
    <div class="publish-container">
      <div class="publish-header">
        <h1>发布商品</h1>
        <p>详细填写商品信息，让买家更好地了解你的商品</p>
      </div>

      <el-form
        ref="publishFormRef"
        :model="publishForm"
        :rules="publishRules"
        class="publish-form"
        label-width="100px"
        size="large"
      >
        <!-- 商品图片 -->
        <el-form-item label="商品图片" prop="images" required>
          <ImageUpload 
            v-model="publishForm.images"
            :max-count="9"
          />
        </el-form-item>

        <!-- 商品标题 -->
        <el-form-item label="商品标题" prop="title">
          <el-input
            v-model="publishForm.title"
            placeholder="请输入商品标题，简洁明了"
            maxlength="100"
            show-word-limit
            clearable
          />
        </el-form-item>

        <!-- 商品描述 -->
        <el-form-item label="商品描述" prop="description">
          <el-input
            v-model="publishForm.description"
            type="textarea"
            placeholder="详细描述商品的外观、功能、使用情况等"
            :rows="6"
            maxlength="1000"
            show-word-limit
            resize="none"
          />
        </el-form-item>

        <!-- 商品分类和成色 -->
        <div class="form-row">
          <el-form-item label="商品分类" prop="category" class="form-col">
            <el-select
              v-model="publishForm.category"
              placeholder="选择商品分类"
              class="full-width"
            >
              <el-option
                v-for="category in goodsStore.categories"
                :key="category.categoryId"
                :label="category.name"
                :value="category.name"
              >
                <span>{{ category.icon }} {{ category.name }}</span>
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="商品成色" prop="condition" class="form-col">
            <el-select
              v-model="publishForm.condition"
              placeholder="选择商品成色"
              class="full-width"
            >
              <el-option label="全新" value="全新" />
              <el-option label="九成新" value="九成新" />
              <el-option label="八成新" value="八成新" />
              <el-option label="七成新" value="七成新" />
              <el-option label="六成新及以下" value="六成新及以下" />
            </el-select>
          </el-form-item>
        </div>

        <!-- 价格信息 -->
        <div class="form-row">
          <el-form-item label="出售价格" prop="price" class="form-col">
            <el-input-number
              v-model="publishForm.price"
              placeholder="0.00"
              :min="0.01"
              :precision="2"
              :step="0.01"
              controls-position="right"
              class="full-width"
            >
              <template #prefix>¥</template>
            </el-input-number>
          </el-form-item>

          <el-form-item label="原价" prop="originalPrice" class="form-col">
            <el-input-number
              v-model="publishForm.originalPrice"
              placeholder="0.00（选填）"
              :min="0.01"
              :precision="2"
              :step="0.01"
              controls-position="right"
              class="full-width"
            >
              <template #prefix>¥</template>
            </el-input-number>
          </el-form-item>
        </div>

        <!-- 联系方式 -->
        <el-form-item label="联系方式">
          <el-alert
            title="系统将自动使用你的注册手机号作为联系方式"
            type="info"
            :closable="false"
            show-icon
          />
        </el-form-item>

        <!-- 发布按钮 -->
        <el-form-item>
          <div class="publish-actions">
            <el-button size="large" @click="resetForm">重置</el-button>
            <el-button
              type="primary"
              size="large"
              :loading="goodsStore.isLoading"
              @click="handlePublish"
              class="publish-btn"
            >
              {{ goodsStore.isLoading ? '发布中...' : '发布商品' }}
            </el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>

    <!-- 发布须知 -->
    <div class="publish-tips">
      <h3>📋 发布须知</h3>
      <ul>
        <li>🔍 请确保商品信息真实有效</li>
        <li>📸 建议上传清晰的商品图片</li>
        <li>💰 价格设置要合理公道</li>
        <li>📞 保持联系方式畅通</li>
        <li>⚠️ 禁止发布违法违规商品</li>
        <li>🤝 诚信交易，友善沟通</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useGoodsStore } from '@/stores/goodsStore'
import { useRouter } from 'vue-router'
import ImageUpload from '@/components/ImageUpload.vue'
import { 
  User, 
  Message, 
  CreditCard, 
  Phone, 
  Lock 
} from '@element-plus/icons-vue'

const goodsStore = useGoodsStore()
const router = useRouter()

// 表单引用
const publishFormRef = ref()

// 发布表单数据
const publishForm = reactive({
  title: '',
  description: '',
  category: '',
  condition: '',
  price: null,
  originalPrice: null,
  images: []
})

// 表单验证规则
const publishRules = {
  images: [
    { 
      validator: (rule, value, callback) => {
        if (!value || value.length === 0) {
          callback(new Error('请至少上传一张商品图片'))
        } else {
          callback()
        }
      }, 
      trigger: 'change' 
    }
  ],
  title: [
    { required: true, message: '请输入商品标题', trigger: 'blur' },
    { min: 5, max: 100, message: '标题长度在5到100个字符', trigger: 'blur' }
  ],
  description: [
    { required: true, message: '请输入商品描述', trigger: 'blur' },
    { min: 10, max: 1000, message: '描述长度在10到1000个字符', trigger: 'blur' }
  ],
  category: [
    { required: true, message: '请选择商品分类', trigger: 'change' }
  ],
  condition: [
    { required: true, message: '请选择商品成色', trigger: 'change' }
  ],
  price: [
    { required: true, message: '请输入出售价格', trigger: 'blur' },
    { type: 'number', min: 0.01, message: '价格必须大于0', trigger: 'blur' }
  ]
}

// 处理发布
const handlePublish = async () => {
  if (!publishFormRef.value) return
  
  await publishFormRef.value.validate(async (valid) => {
    if (valid) {
      const success = await goodsStore.publishGoods(publishForm)
      if (success) {
        // 发布成功，跳转到首页
        router.push('/')
      }
    }
  })
}

// 重置表单
const resetForm = () => {
  if (publishFormRef.value) {
    publishFormRef.value.resetFields()
  }
  publishForm.images = []
}
</script>

<style scoped>
.publish-view {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;
  align-items: start;
}

.publish-container {
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.publish-header {
  text-align: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.publish-header h1 {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.publish-header p {
  color: #666;
  font-size: 16px;
}

.publish-form {
  max-width: none;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-col {
  margin-bottom: 22px;
}

.full-width {
  width: 100%;
}

.publish-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.publish-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  padding: 12px 40px;
  font-weight: 500;
}

.publish-tips {
  background: white;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  height: fit-content;
  position: sticky;
  top: 20px;
}

.publish-tips h3 {
  color: #333;
  font-size: 18px;
  margin-bottom: 15px;
  text-align: center;
}

.publish-tips ul {
  list-style: none;
  padding: 0;
}

.publish-tips li {
  padding: 8px 0;
  font-size: 14px;
  color: #666;
  border-bottom: 1px solid #f8f9fa;
}

.publish-tips li:last-child {
  border-bottom: none;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .publish-view {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 15px;
  }
  
  .publish-container {
    padding: 20px;
  }
  
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  
  .publish-tips {
    position: static;
  }
}
</style>